<template>
  <div>
    <h3>商品清单如下：</h3>
    <ShopPrice
      v-for="(item, index) in arr"
      :key="index"
      :shopName="item.shopName"
      :price="item.price"
    ></ShopPrice>
    <br /><br />
    <h3>请选择购买的数量：</h3>
    <ShopCount
      v-for="(item, index) in arr"
      :key="index + 4"
      :shopName="item.shopName"
      v-model.number="item.count"
    ></ShopCount>
    <h2>总价为：{{ sum }}</h2>
  </div>
</template>

<script>
import ShopPrice from "./components/shop-price.vue";
import ShopCount from "./components/shop-count.vue";
export default {
  // name: "",
  components: { ShopPrice, ShopCount },
  props: {},
  data() {
    return {
      arr: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  computed: {
    sum() {
      return this.arr.reduce((pre, item) => pre + item.price * item.count, 0);
    },
  },
  watch: {},
  created() {},
  methods: {},
};
</script>

<style lang="less" scoped></style>
